<template>
  <!-- 倒计时容器，点击后显示设置对话框 -->
  <div class="countdown-container" @click="showDialog = true">
    <!-- 显示提示信息，根据时间有效性显示不同内容 -->
    <div class="tip">{{ isValidTime ? '倒计时' : '请设置有效的未来时间' }}</div>

    <!-- 当时间有效时，显示倒计时 -->
    <div class="time-display" v-if="isValidTime">
      <!-- 显示剩余天数 -->
      <span class="time-unit">{{ days }}天</span>
      <!-- 时间分隔符 -->
      <span class="time-sep">:</span>
      <!-- 显示剩余小时数 -->
      <span class="time-unit">{{ hours }}</span>
      <!-- 时间分隔符 -->
      <span class="time-sep">:</span>
      <!-- 显示剩余分钟数 -->
      <span class="time-unit">{{ minutes }}</span>
      <!-- 时间分隔符 -->
      <span class="time-sep">:</span>
      <!-- 显示剩余秒数 -->
      <span class="time-unit">{{ seconds }}</span>
    </div>
  </div>

  <!-- 显示倒计时设置对话框，使用双向绑定控制显示状态 -->
  <countdownTimingDialog v-model="showDialog" />
</template>

<script lang="ts" setup>
// 从 vue 导入响应式相关函数
import { ref, watch, computed, type ComputedRef } from 'vue';
// 导入 moment 库用于时间处理
import moment from 'moment';
// 从状态管理仓库导入倒计时时间仓库
import { useCountdownTimeStore } from '@/stores/countdownTimeStore'; // 假设store路径
// 导入倒计时设置对话框组件
import countdownTimingDialog from './countdown-timing-dialog.vue';

/**
 * 初始化倒计时时间仓库实例
 */
const countdownStore = useCountdownTimeStore();

/**
 * 倒计时是否正在运行的状态
 */
const isRunning = ref<boolean>(false);
/**
 * 倒计时定时器
 */
let timer = null as any;
/**
 * 剩余倒计时时间（毫秒）
 */
const remainingTime = ref<number>(0);

/**
 * 计算属性，从仓库中获取目标时间戳
 * @returns {number} 目标时间戳
 */
const targetTime: ComputedRef<number> = computed(() => countdownStore.targetTimestamp);

/**
 * 计算属性，判断目标时间是否有效（存在且大于当前时间）
 * @returns {boolean} 时间是否有效
 */
const isValidTime: ComputedRef<boolean> = computed(() => {
  return !!targetTime.value && moment(targetTime.value).isAfter(moment());
});

/**
 * 计算属性，使用 moment 库将剩余时间转换为持续时间对象
 * @returns {moment.Duration} 持续时间对象
 */
const duration: ComputedRef<moment.Duration> = computed(() =>

  moment.duration(remainingTime.value, 'milliseconds')
);
/**
 * 计算属性，获取剩余天数
 * @returns {number} 剩余天数
 */
const days: ComputedRef<number> = computed(() => duration.value.days());

/**
 * 计算属性，获取剩余小时数，并补零至两位
 * @returns {string} 剩余小时数
 */
const hours: ComputedRef<string> = computed(() => String(duration.value.hours()).padStart(2, '0'));

/**
 * 计算属性，获取剩余分钟数，并补零至两位
 * @returns {string} 剩余分钟数
 */
const minutes: ComputedRef<string> = computed(() => String(duration.value.minutes()).padStart(2, '0'));

/**
 * 计算属性，获取剩余秒数，并补零至两位
 * @returns {string} 剩余秒数
 */
const seconds: ComputedRef<string> = computed(() => String(duration.value.seconds()).padStart(2, '0'));


/**
 * 更新倒计时的函数
 */
const updateCountdown = (): void => {
  // 如果时间无效或目标时间已过，重置状态并停止倒计时
  if (!isValidTime.value || !moment(targetTime.value).isAfter(moment())) {
    countdownStore.setTargetTimestamp(0);
    clearInterval(timer);
    isRunning.value = false;
    remainingTime.value = 0;
    return;
  }
  // 计算剩余时间
  remainingTime.value = moment(targetTime.value).diff(moment(), 'milliseconds');
};

/**
 * 监听时间有效性变化，启动或停止倒计时
 */
watch(isValidTime, (newVal: boolean): void => {
  if (newVal && !isRunning.value) {
    // 启动定时器，每秒更新一次倒计时
    timer = setInterval(updateCountdown, 1000);
    isRunning.value = true;
    // 立即更新一次倒计时
    updateCountdown();
  } else if (!newVal && isRunning.value) {
    // 停止定时器
    clearInterval(timer);
    isRunning.value = false;
  }
}, { immediate: true }); // 新增：立即触发初始状态

/**
 * 可选：监听目标时间戳变化，校验时间戳格式
 */
watch(targetTime, (newVal: number): void => {
  if (typeof newVal !== 'number') {
    console.error('targetTimestamp 应为毫秒级时间戳，当前类型：', typeof newVal);
  }
});

/**
 * 控制倒计时设置对话框显示状态的响应式变量
 */
const showDialog = ref<boolean>(false);
</script>

<style lang="scss" scoped>
// 倒计时容器样式，垂直居中显示内容
.countdown-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  // 提示信息样式
  .tip {
    font-size: 1.2rem;
  }

  // 倒计时显示区域样式
  .time-display {
    // 倒计时数字字体大小
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    // 元素之间的间距
    gap: 0.5rem;

    // 时间分隔符样式
    .time-sep {
      font-size: 1.8rem;
    }
  }
}
</style>